<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <meta content="telephone=no" name="format-detection" />
    <title>Simple App By Ron</title>
    <meta name="description" content="this is a test application.">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
	<link rel="stylesheet" href="css/idangerous.swiper.css">
	<link rel="stylesheet" href="css/idangerous.swiper.scrollbar.css">
	<link rel="stylesheet" href="css/simple-app.css">
</head>
<body>
    <div style="display: none">
        <img src="img/logo.jpg" alt="logo"/>
        <h1>note</h1>
        <p>this is a test application..</p>
    </div>
    <div id="loading">
        <div class="spinner">
            <div class="dot1"></div>
            <div class="dot2"></div>
        </div>
    </div>
    <div id="paint">
        <div id="lotteryContainer">
            <div class="bg-img bg-img-1"></div>
            <canvas id="stage" style="position:absolute;left:0;top:0;"></canvas>
        </div>
    </div>
	<div class="swiper-pages swiper-container">
		<div class="swiper-wrapper" id="swiperWrapper">
		</div>
	</div>
    <div class="touch-layer">
        <span id="soundControl" class="icon jump">
            <i class="icon-2x icon-music"></i>
        </span>
    </div>
    <p class="up"><i class="icon-5x icon-angle-up"></i></p>
    <audio id="bgm" src="media/bgm.mp3" loop="loop"></audio>
	<script src="js/jquery-2.1.3.min.js"></script>
	<script src="js/jquery.mobile.custom.min.js"></script>
    <script type="text/javascript">
        (function($){
            var imgCount = 7;
            var imageRoot = 'img/';
            for(var i=1;i<=imgCount;i++){
                var $img = $('<div class="bg-img"/>').attr('data-img-src',imageRoot+i+'.jpg');
                $('<div class="swiper-slide"/>').append($img).appendTo('#swiperWrapper');
            }
            $('#swiperWrapper').find('.swiper-slide>.bg-img:last').on('imgload',function(){
               $(this).after('<i class="last-btn"><a href="http://baidu.com"><img width="125px" src="img/button.gif" alt=""/></a></i>');
            });
        })(jQuery);
    </script>
	<!-- Don't forget to get the latest Swiper and scrollbar version here-->
	<script src="js/idangerous.swiper-2.0.min.js"></script>
    <script src="js/idangerous.swiper.progress.min.js"></script>
    <script src="js/canvas.handle.js"></script>
	<script src="js/simple-app.js"></script>
</body>
</html>